<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>所有用户</title>
    <script src="../lib/vue.js"></script>
    <script src="../lib/axios.min.js"></script>
    <link rel="stylesheet" href="../lib/element_ui.css"/>
    <style>
        #box{
            width: 50%;
            margin-left: 25%;
            margin-right: 25%;
            margin-top: 5%;
        }
    </style>
</head>
<body>
    <div id="box">
        <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
            fixed
            prop="id"
            label="用户编号"
            width="150">
            </el-table-column>
            <el-table-column
            prop="username"
            label="用户姓名"
            width="120">
            </el-table-column>
            <el-table-column
            prop="password"
            label="用户密码"
            width="120">
            </el-table-column>
            <el-table-column
            prop="gender"
            label="用户性别"
            width="120">
            </el-table-column>
            <el-table-column
            prop="registTime"
            label="注册时间"
            width="300">
            </el-table-column>
            <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
                <el-button @click="deleteInfo(scope.row)" type="text" size="small">删除</el-button>
                <el-button type="text" size="small" @click="changeInfo(scope.row)">编辑</el-button>
            </template>
            </el-table-column>
        </el-table>
    </div>
    <script src="../lib/element_ui.js"></script>
    <script>
        var vm = new Vue({
            el:"#box",
            data:{
                tableData:[]
            },
            methods: {
                deleteInfo(row) {
                    axios.get("/deleteinfo?id=" + row.id).then(item=>{
                        console.log(item.data);
                        this.tableData = item.data;
                    });
                },
                changeInfo(row){
                    axios.get("/info?id=" + row.id).then(item=>{
                        console.log(item.data);
                        window.location.href = item.data;
                    });
                }
            },
            mounted() {
                axios.get("/users").then(item=>{this.tableData = item.data});
            }
        });
    </script>
</body>
</html>